<template>
	<div class="helloworld">
		<img :src="demo" />
		<div class="div"></div>
		<img src="https://cdn.xiongyechang.com/2020-07-01_11h15_25.png" />
	</div>
</template>

<script>
	import favicon from '@/assets/favicon.png';
	import demo from '@/assets/demo.jpg';
	// import $ from 'jquery';webpack配置了 不用引入了

	console.log(favicon);
	console.log(demo);

	const f = require("@/assets/favicon.png");

	console.log(f.default);

	const d = require("@/assets/demo.jpg");

	console.log(d.default);

	const fa = import("@/assets/demo.jpg");

	fa.then(r => {console.log(r.default)});

	// Promise.try(() => {
	// 	console.log("hello Promise.try") // 没有这个方法
	// })

	// 这他妈的是个奇葩问题

	class Fool{
		// static name = "apple";
		// #id = 1;

		toString(){
			return "hello fool";
		}
	}

	let fool = new Fool();
	console.log(fool.toString());

	export default {
		name: "helloworld",
		data(){
			return {
				favicon,
				demo
			}
		},
		mounted(){
			$(".helloworld img").attr("style", "width: 100%");

			_.each([1,2,3,4,5], function(item, index){
				console.log(item, index);
			})
		},
	}
</script>

<style lang="css" scoped>
.helloworld{
	background-color: pink;
	border-radius: 10px;
}

.helloworld img {
	width: 100%;
	height: auto;
}

.div{
	background-image: url("/static/202531-1541247931a878.jpg");
	/* background-image: url("~@/assets/202531.jpg"); */
	background-size: contain;
	background-repeat: no-repeat;
	height: 300px;
}
</style>